关于css布局、居中的问题以及一些小技巧

CSS的两种经典布局

• 左右布局

• 一栏定宽，一栏自适应

    <!-- html -->
    <div class="left">定宽</div>
    <div class="right">自适应</div>
    <!-- css -->
    .left{
      width: 200px;
      height: 600px;
      float: left;
      display: table;
      text-align: center;
      line-height: 600px;
    }
    .right{
      margin-left: 210px;
      height: 600px;
      background: yellow;
      text-align: center;
      line-height: 600px;
    }

---

• 利用绝对定位实现

    <!-- html -->
    <div class= "left">
    </div>
    <div class= "right">
    </div>
    <!-- css-->
    .left{
        position:absolute;
        left:0;
        width:200px;
    }
    .right{
        margin-left:200px;
    }

---

• 左中右布局

• 利用绝对定位实现

    <!-- html-->
    <div class= "left">
    </div>
    <div class= "main">
    </div>
    <div class= "right">
    </div>
    <!-- css-->
    .left{
      width:200px;
      background-color:yellow;
      position:absolute;
      top:0;
      left:0;
    }
    .main{
      margin-left:200px;
      margin-right:300px;
    }
    .right{
      width:300px;
      background-color:orange;
      position:absolute;
      top:0;
      right:0;
    }

---

• 利用浮动定位实现

    <!-- html-->
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
    <!-- css-->
    .left{
      width:300px;
      background-color:yellow;
      float:left;
    }
    .right{
      width:200px;
      background-color:orange;
      float:right;
    }
    .main{
      margin-left:300px;
      margin-right:200px;
}

---

• 圣杯布局，两边定宽，中间自适应

    <!-- html-->
    <div class="container">
        <div class="main col">Main</div>
        <div class="left col">Left</div>
        <div class="right col">Right</div>
    </div>
    <!-- css-->
        .col{
            float: left;   
            position:relative;
        }
        .container{
            padding:0 200px 0 100px;
        }
        .left{
            left:-100px;
            width: 100px;
            height:100%;
            margin-left: -100%;
            background: red;
        }
        .main{
            width:100%;
            height: 100%;
        }
        .right{
            right:-200px;
            width:200px;
            height:100%;
            margin-left: -200px;
            background: yellow;
        }

---

• 双飞翼布局

    <!-- html-->
     <div class="container"> 
        <div class="left col ">Left</div>
        <div class="main col ">
            <div class="main_inner">Main</div>
        </div>
        <div class="right col ">Right</div>
    </div>
    <!-- css-->
     .col{ 
            float: left;
        }
        .main{ 
            width:100%;
            height:100%;
        }
        .main_inner{
            margin:0 200px 0 100px;
        }
        .left{
            width: 100px;
            height: 100%;
            margin-left: -100%;
            background: red;
        }
        .right{
            height:100%;
            width:200px;
            margin-left: -200px;
            background: yellow;
        }

---

CSS居中问题

• 水平居中

• 对于行内元素(inline)：text-align: center;

    <!-- html -->
    <div>
       <span >kaka</span>
    </div>
    <!-- css -->
    div {
        text-align:center
    }

---

• 对于块级元素(block)：
  1.给此块级元素设置宽度
  2.margin:0 auto;

    <!-- html -->
    <div class="parent">
        <div class="child">kaka</div>
    </div>
    <!-- css -->
    .parent {
        width:1002px;
    }
    .child {
        width:50%;//也可以是固定像素
        margin:0 auto;
    }

---

• 垂直居中

• 行高与高度一致使其居中，适用于只有一行文字的情况

    <!-- html -->
    <div class="parent">
        <div class="child">kaka</div>
    </div>
    <!-- css -->
    .parent {
        height:1002px;
        line-height:1002px;
    }

---

• 父元素高度不写（推荐写法）

    <!-- html -->
    <div class="parent">
        <div class="child">kaka</div>
    </div>
    <!-- css -->
    .parent {
        padding:10px 0;
    }

---

• 水平垂直均居中

• 已知宽高，给负margin

    <!-- html -->
    <div class="parent">
        <div class="child">kaka</div>
    </div>
    <!-- css -->
    .parent {
        position: relative;
    }
    .child {
      position: absolute;
      width:1002px;
      height:828px;
      top: 50%;
      left: 50%;
      margin-top:-414px;
      margin-left:-501px;
    }

---

• 未知宽高，transform方案

    <!-- html -->
    <div class="parent">
        <div class="child">kaka</div>
    </div>
    <!-- css -->
    .parent {
      position: relative;
    }
    .child {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

---

• flex布局

    <!-- html -->
    <div class="parent">
        <div class="child">kaka</div>
    </div>
    <!-- css -->
    .parent {
      display: flex;
      justify-content:center;//子元素水平居中
      align-items:center;//子元素垂直居中
    }

---

CSS的一些小技巧

• 请写出「姓名」与「联系方式」两端对齐的例子

<!-- html -->
<span>姓名</span>
<span>联系方式</span>
<!-- css -->
span{
    line-height:20px;
    font-size:20px;
    height:20px;
    overflow:hidden;
}
span::after{
    content: '';
    display: inline-block;
    width: 100%;
}

• 文本内容过长如何变成省略号？
  1 一行文本过长,只需要对该div作以下操作：

<!-- css -->
div{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

2 多行文本超出,如：在第二行后省略：

<!-- css -->
div{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

• 如何使固定高度的div里面的文字垂直居中？

1.先确定行高 2.再用padding补全高度。这种写法的好处是在文字增减过程中不会出现bug。
例：一个高 40px 的 div，里面的文字垂直居中

<!-- css -->
div{
    line-height:20px;
    padding:10px 0;
}

• 使该元素变大1.2倍

    transform: scale(1.2);

• 动画过渡效果

    transition: all 0.3s;